<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRouter } from '@/router';
import * as OrdersService from '../../api/orders';
import { OrderRefundDetails } from '@/types/order';
import { RefundStatus } from '@/constants/orders';

import RefundFooter from './components/refund-footer.vue';
import { onLoad } from '@dcloudio/uni-app';
import { withCurrencyUnit } from '@/pages/checkout/helperFunctions';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();

const current = ref(0);
const isRefundDone = ref(false);
const steps = ref([
  { title: t('LOKey_cancelFree'), desc: t('LOKey_cancelFreeBefore') },
  { title: t('LOKey_cancelPartPay'), desc: t('LOKey_cancelPartPayBefore') },
  { title: t('LOKey_cancelAllPay'), desc: t('LOKey_cancelAllPayBefore') }
]);

const data = ref<OrderRefundDetails>();
const cancelFee = computed(() => {
  const [before, after] = t('LOKey_orderBreakageFee').split('@money');
  return { before, after, value: `${data.value?.cancelFee}JPY` };
});

const charges = ref<{ date: string; amount: string }[]>([]);
const totalAmount = computed(() => {
  return charges.value.reduce((acc, cur) => {
    return acc + parseFloat(cur.amount);
  }, 0);
});

function setData(res: any) {
  data.value = res.data;
  res.data.cancelRate.forEach((item: any, index: number) => {
    steps.value[index].desc = steps.value[index].desc.replace('@date', item.date);
    if (item.name) {
      steps.value[index].title = item.name;
    }
    if (item.selected) {
      current.value = index;
    }
  });
}

async function fetchData(orderSn: string) {
  OrdersService.getOrderRefundDetails(orderSn).then(setData);
}

function refresh() {
  OrdersService.getOrderRefundDetails(data.value!.orderSn).then((res) => {
    isRefundDone.value = true;
    setData(res);
  });
}

onLoad((options: any) => {
  if (options.status === RefundStatus.WAIT) {
    const parsedData = JSON.parse(options.data);
    setData({ data: parsedData });
  } else {
    isRefundDone.value = true;
    fetchData(options.orderSn);
    if (options.charges) {
      charges.value = JSON.parse(options.charges);
    }
  }
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('RefundDetails')"
    background-color="#fff"
    color="#3d3d3d"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />

  <view class="p-3 pb-8">
    <apt-section :title="t('LOKey_cancelLimitTime')" custom-style="margin-bottom: 20rpx">
      <uni-steps :active="current" :options="steps" active-color="#269c74" direction="column" />

      <view class="flex items-center" style="padding-left: 30px">
        <view class="text-sm text-primary">{{ cancelFee.before }}</view>
        <view class="mx-2 text-sm text-red">{{ cancelFee.value }}</view>
        <view class="text-sm text-primary">{{ cancelFee.after }}</view>
      </view>
    </apt-section>

    <apt-section>
      <!-- 订单编号 -->
      <view class="mb-4 flex items-center">
        <view class="order-refund-details__label">
          {{ t('LRKey_orderNo') }}
        </view>
        <view class="order-refund-details__value">
          <view class="mr-2 text-base text-primary">{{ data?.orderSn }}</view>
          <apt-copy-text-button :text="data?.orderSn"></apt-copy-text-button>
        </view>
      </view>

      <!-- 下单时间 -->
      <view class="mb-4 flex items-center">
        <view class="order-refund-details__label">{{ t('LOKey_orderTime') }}</view>
        <view class="order-refund-details__value">
          <view class="text-base text-primary">{{ data?.orderCreateAt }}</view>
        </view>
      </view>

      <!-- 实付金额 -->
      <view class="mb-4 flex items-center">
        <view class="order-refund-details__label">
          {{ t('LOKey_orderAmountPay') }}
        </view>
        <view class="order-refund-details__value">
          <view class="text-base text-primary">{{ withCurrencyUnit(data?.bookerFee) }}</view>
        </view>
      </view>

      <!-- 房费 -->
      <template v-if="charges.length > 0">
        <view class="mb-1 flex items-center">
          <view class="order-refund-details__label">
            {{ t('LRKey_roomFeeXNight', { night: charges.length }) }}
          </view>
          <view class="order-refund-details__value">
            <view class="text-base text-red">{{ `¥${totalAmount}JPY` }}</view>
            <uni-icons color="#3d3d3d" size="14" type="down"></uni-icons>
          </view>
        </view>
        <view class="mb-4 order-refund-details__charges">
          <view v-for="charge in charges" :key="charge.date" class="flex items-center">
            <view class="order-refund-details__charges-label">{{ charge.date }}</view>
            <view class="order-refund-details__charges-value">
              {{ withCurrencyUnit(charge.amount) }}
            </view>
          </view>
        </view>
      </template>

      <!-- 取消时间 -->
      <view v-if="data?.refundAt" class="mb-4 flex items-center">
        <view class="order-refund-details__label">
          {{ t('LOKey_orderCancelTime') }}
        </view>
        <view class="order-refund-details__value">
          <view class="text-base text-primary">{{ data?.refundAt }}</view>
        </view>
      </view>

      <!-- 取消费用 -->
      <view class="mb-4 flex items-center">
        <view class="order-refund-details__label">
          {{ t('LOKey_orderCancelFee') }}
        </view>
        <view class="order-refund-details__value">
          <view class="text-base text-red">-{{ withCurrencyUnit(data?.cancelFee) }}</view>
        </view>
      </view>

      <!-- 退款金额 -->
      <view class="mb-4 flex items-center">
        <view class="order-refund-details__label">
          {{ t('LOKey_orderRefundAmount') }}
        </view>
        <view class="order-refund-details__value">
          <view class="text-base text-red">-{{ withCurrencyUnit(data?.refundFee) }}</view>
        </view>
      </view>

      <!-- 优惠券 -->
      <view v-if="data?.refundCouponAmount" class="mb-4 flex items-center">
        <view class="order-refund-details__label">{{ t('LRKey_coupon') }}</view>
        <view class="order-refund-details__value">
          <view class="text-base text-red">
            {{ data?.refundCouponAmount }}
          </view>
        </view>
      </view>

      <!-- 积分抵扣 -->
      <view v-if="data?.refundBalance" class="mb-4 flex items-center">
        <view class="order-refund-details__label">{{ t('LOKey_orderRefundScore') }}</view>
        <view class="order-refund-details__value">
          <view class="text-base text-red">
            {{ data?.refundBalance }}
          </view>
        </view>
      </view>

      <!-- 退款方式 -->
      <view class="flex items-center">
        <view class="order-refund-details__label">
          {{ t('LOKey_orderRefundWay') }}
        </view>
        <view class="order-refund-details__value">
          <view class="text-base text-primary">
            {{ t('LOKey_orderRefundWayOriginal') }}
          </view>
        </view>
      </view>
    </apt-section>
  </view>

  <refund-footer
    :amount="data?.refundFee"
    :is-done="isRefundDone"
    :order-sn="data?.orderSn"
    :pre-cancel-order-sn="data?.preCancelOrderSn"
    @success="refresh"
  ></refund-footer>
</template>

<style>
.order-refund-details__label {
  width: 200rpx;
  margin-right: 12rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #adaeb0;
}

.order-refund-details__value {
  display: flex;
  align-items: center;
  flex: 1;
}

.order-refund-details__charges {
  padding: 16rpx;
  background: #fafafa;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.order-refund-details__charges-label {
  font-size: 24rpx;
  line-height: 48rpx;
  color: #adaeb0;
}

.order-refund-details__charges-value {
  margin-left: 62rpx;
  font-size: 24rpx;
  line-height: 48rpx;
  color: #3d3d3d;
}
</style>
